<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			.one{
				background-color: #00BFFF;
			}
			.two{
				color:red;
			}
		</style>
	</head>
	<body>
		10.****v-bind 绑定属性
		简写：:
		
	    绑定class
		1. <h2 :class="o">2222</h2>
		
		2. 直接使用数组
		<h2 :class="[o,t]">2222</h2> 必须放到数组(data里的数据)里,才能解析多个
		3. 直接使用对象
		<h2 :class="{one:true,two:true}">2222</h2>
		   解析多个，如果放到对象里（数据要是css里面的类名）
		4.数组里面套三元 
		<h2 :class="[o,flag?t:'']">2222</h2>
	    5.数组里面套对象
		<h2 :class="[o,{two:flag}]">2222</h2>
		
		绑定style
		1. 直接写对象的值
		<h3 :style="{'color':'pink','background-color': '#00FF3C'}">3333</h3>
		2. 对象可以提取到data里
		<h3 :style="stylea">3333</h3>
		3. 多个data里面的对象可以合并到一个数组里
		<h3 :style="[stylea,styleb]">3333</h3>
		
		<div id="app">
           <h1 v-bind:title="cona">1111</h1>
		   <h1 :title="cona">1111</h1>
		   
		   <h3 style="color:pink;background-color: #00FF3C;">3333</h3>
		   <h3 :style="{'color':'pink','background-color': '#00FF3C'}">3333</h3>
		   <h3 :style="stylea">3333</h3>
		   <h3 :style="[stylea,styleb]">3333</h3>
		   
		   
		   <h2 :class="o">2222</h2>
		   <h2 :class="[o,t]">2222</h2>
		   <h2 :class="{one:true,two:true}">2222</h2>
		   <h2 :class="[o,flag?t:'']">2222</h2>
		   <h2 :class="[o,{two:flag}]">2222</h2>
		   
		   <img v-for="item in imgarr" :src="item" alt="">
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
				   cona:"我是内容1",
				   imgarr:["img/01.jpg","img/02.jpg","img/03.jpg"],
				   o:"one",
				   t:"two",
				   flag:true,
				   stylea:{'color':'pink','background-color': '#00FF3C'},
				   styleb:{"border":"1px solid red"}
				}
			})
		</script>
	</body>
</html>
